<!-- 
 总结：可折叠面板
  重点在于掌握css的基本布局 与 v-show + v-on + ref响应式结合使用
  案例并不难，但是对于练习基本指令比较有效 
-->
<!-- 可折叠面板案例 -->
<script setup>
  import {ref} from "vue"
  // 面板状态
  const isOpen = ref(true);
</script>

<template>
  <div class="panel-box">
    <div class="header">
      <h3>可折叠面板</h3>
    </div>
    <div class="body">
      <div class="title">
        <span><strong>自由与爱情</strong></span>
        <span class="btn" @click="isOpen = !isOpen">
          {{ isOpen === true ? "收起" : "展开" }}
        </span>
      </div>
      <div class="text" v-show="isOpen">
        <p>生命诚可贵，</p>
        <p>爱情价更高。</p>
        <p>若为自由故，</p>
        <p>两者皆可抛。</p>
      </div>
    </div>
  </div>

</template>

<style>
  body {
    background-color: rgb(204, 204, 204);
  }
  .panel-box {
    width: 500px;
    padding: 12px 0px;
    border: 2px green solid;
    background-color: #fff;
    border-radius: 1em;
  }
  .header {
    text-align: center;
  }
  .body {
    width: 440px;
    padding: 8px;
    margin: 0 auto;
  }
  .title {
    display: flex;
    justify-content: space-between;
    height: 34px;
    line-height: 34px;
    border: 1px #ccc solid;
    padding: 0 8px;
  }
  .text {
    border: 1px #ccc solid;
    padding: 0 8px;
  }
  .btn {
    cursor: pointer;
  }
</style>